<template>
    <!-- 打印 -->
 <div style="position: absolute;bottom: 100px;left: 500px;width: 300px;display: none;">
   <div id='printBill'>
     <div style="font-size: 13px;color: #000000;width:81%;padding:30px">
       <div style="width: 100%;height: 40px;"></div>
       <div style="display: flex;width: 100%;">
         <div style="width: 16%;">{{2023 }}</div>
         <div style="width: 12%;">{{ 10 }}</div>
         <div style="width: 12%;">{{ 23 }}</div>
         <div style="width: 60%;text-align: right;">NO:00458228</div>
       </div>
       <div style="line-height: 20px;">
           <div style="width: 100%;height:35px;display: flex;">
              <div style="width:8%; display: flex;justify-content: center;align-items: center;"></div>
              <div style="width:8%; display: flex;align-items: center;flex-direction: column;">
                   <div style="width:100%;height: 50%;line-height: 30px;text-align: center;"></div>
                   <div style="width:100%;height:50%;line-height: 30px;text-align: center;"></div>
               </div>
              <div style="width:48%%; flex-direction: row;height:40px;line-height:40px">
                   <div style="width:100%;height: 50%;line-height: 40px;;line-height:40px"><span style="margin-left: 5px;">王一二年</span></div>
                   <div style="width:100%;height: 50%;line-height: 40px;line-height:40px;padding-left: 5px;">西北商贸大地的哈佛你</div>
                   </div>
              <div style="width:8%; ;display: flex;justify-content: center;align-items: center;"></div>
              <div style="width:32%;display: flex;justify-content: center;align-items: center;"></div>
           </div>
           <div style="width:100%; display: flex;justify-content: center;align-items: center;height: 30px;line-height: 30px;">
               <!-- <div style="width:44%; display: flex;justify-content: center;align-items: center;letter-spacing:20px">品名</div>
               <div style="width:20%; display: flex;justify-content: center;align-items: center;">购气数量</div>
               <div style="width:12.5%; display: flex;justify-content: center;align-items: center;">单价</div>
               <div style="width:28%;display: flex;justify-content: center;align-items: center;">金额</div> -->
           </div>
           <div style="width:100%; display: flex;margin-top: 40px;">
               <div style="width:30%;  display: flex;flex-direction: column; justify-content: center;align-items: center">
                   <div >天然气 （第一阶梯）</div>
                   <div >天然气 （第一阶梯）</div>
                   <div >天然气 （第一阶梯）</div>
                   <div >天然气 （第一阶梯）</div>
               </div>
               <div style="width:24%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
                   <div>45.34</div>
                   <div>45.34</div>
                   <div>45.34</div>
                   <div>45.34</div>
               </div>
               <div style="width:12.5%; display: flex;flex-direction: column;justify-content: center;align-items: center;">
                   <div>2.18</div>
                   <div>2.18</div>
                   <div>2.18</div>
                   <div>2.18</div>
               </div>
               <div style="width:24%;display: flex;;flex-direction: column;justify-content: center;align-items: center;">
                   <div>100</div>
                   <div>100</div>
                   <div>100</div>
                   <div>100</div>
               </div>
           </div>
           <div style="width:100%; height: 50px;line-height: 50px;margin-top:20px">
               <span style="margin-left:96px">{{ '壹佰元整' }}</span>
           </div>
           <div style="width:100%; display: flex;height: 48px;">
               <!-- <div style="height: 48px;line-height: 48px;width:10%">备注：</div>
               <div style="height: 48px;line-height: 48px;width:90%">
                   <div style="height: 40px;line-height: 40px;width:100%">1. 客服电话：96717</div>
                   <div style="height: 40px;line-height: 40px;width:100%">2. 如需发票，请凭此收据到收费大厅开具</div>
               </div> -->
           </div>
       </div>
       <div style="margin-top: 25px;display: flex;width: 100%;height: 30px;">
         <div style="width: 38%;"><span style="margin-left: 39px;">复核数据</span></div>
         <div style="width: 38%;"><span style="margin-left: 39px;">张山</span></div>
         <div style="width: 24%;"><span style="margin-left: 58px;">李四</span></div>
       </div>
     </div>


   </div>
 </div>
</template>

<script>
import printJS from 'print-js'
   export default {
       props:['info'],
       data (){
           return{
               indexs:[]
           }
       },
       mounted(){
           this.billPrintClick()
       },
       methods:{
           //打印
           billPrintClick(){
               let that =this
           setTimeout(function(){
               const focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
               const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
               printJS({
               printable: 'printBill',// 标签元素id
               type: 'html',
               header: '',
               targetStyles: ['*'],
               scanStyles:false,//打印必须加上，不然页面上的css样式无效
               style,
               onPrintDialogClose:()=>{
                   console.log('挤奶了')
                   that.$emit('closeMethod')
                   clearInterval(focuser);
               }
               });
           },100)
           },
       },
   }
</script>